<script setup lang="ts">
import { ref } from 'vue'

const btnClick = (e: MouseEvent) => {
  console.log(e)
}
const inputEvent = (e: Event) => {
  // if (e.target) {
  //   console.log((e.target as HTMLInputElement).value)
  // }
  // js:可选链操作符
  // 语法  值?.属性
  // 如果值后面的属性为null/undefined 返回undefined,如果有值就返回相应的值
  // 注意点：vue2的脚手架的html中不支持，js代码中支持,它只能用于get获取值，不能用于set设置值
  console.log((e.target as HTMLInputElement)?.value)
}
// 用户信息数据获取与渲染
const userInfo = ref<{
  user?: {
    username: string
    age: number
  }
}>({})
// 接口请求获取数据
setTimeout(() => {
  userInfo.value = {
    user: {
      username: '张三',
      age: 18
    }
  }
}, 5000)
// console.log(userInfo.value.user?.username)
if (userInfo.value.user === null || userInfo.value.user === undefined) {
  console.log(undefined)
} else {
  console.log(userInfo.value.user.username)
}
let arr = [{ id: 1, num: 2 }]
const findItem = arr.find(item => item.id === 1)
// if (findItem) {
//   console.log(findItem.num)
// }
console.log(findItem?.num)
</script>

<template>
  <div class="home-page">
    <button @click="btnClick($event)">点击事件</button>
    <input type="text" @input="inputEvent($event)" />
    <hr />
    <h3>{{ userInfo.user?.username }}</h3>
  </div>
</template>

<style scoped></style>
